<template>
  <el-container>
    <el-header>
      <Title :title="title" :SecTitle="SecTitle" />
    </el-header>
    <el-main>
      <el-row>
        <el-col>
          <el-form :inline="true" :model="zxform">
            <el-form-item>
              <span class="demonstration">时间 </span>
              <el-date-picker
                v-model="zxform.billTime"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="timestamp"
                style="width:200px"
              >
              </el-date-picker>
            </el-form-item>

            <el-form-item label="订单" style="margin-left:5px">
              <el-input
                v-model="zxform.orderNo"
                placeholder="请输入订单号"
                style="width:150px"
              >
              </el-input>
            </el-form-item>

            <el-form-item label="关联方" style="margin-left:5px">
              <el-input
                v-model="zxform.name"
                placeholder="请输入关联方"
                style="width:150px"
              >
              </el-input>
            </el-form-item>

            <el-form-item label="支付方式">
              <el-select
                v-model="zxform.payType"
                placeholder="请选择"
                style="width:100px"
              >
                <el-option label="微信" value="微信"></el-option>
                <el-option label="支付宝" value="支付宝"></el-option>
                <el-option label="免支付" value="免支付"></el-option>
                <el-option label="平台" value="平台"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onFilter">筛选</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <el-table :data="BillsData" style="width:100%" :cell-style="changeColor">
        <el-table-column prop="billTime" label="时间" width="auto">
        </el-table-column>
        <el-table-column prop="orderNo" label="订单号" width="auto">
        </el-table-column>
        <el-table-column prop="serialNo" label="流水号" width="auto">
        </el-table-column>
        <el-table-column prop="name" label="关联方" width="180">
        </el-table-column>
        <el-table-column prop="price" label="金额" width="auto">
        </el-table-column>
        <el-table-column prop="platformMoney" label="平台余额(元)" width="auto">
        </el-table-column>
        <el-table-column prop="tradeType" label="交易类型" width="100">
        </el-table-column>
        <el-table-column prop="payType" label="支付方式" width="100">
        </el-table-column>
      </el-table>
    </el-main>

    <el-footer>
      <Paging
        @pagesizeChange="getPagesize"
        @currentPageChange="getCurrentPage"
        :pagesize="pagesize"
        :currentPage="currentPage"
        :total="total"
      ></Paging>
    </el-footer>
  </el-container>
</template>

<script>
import Title from "../../components/common/title.vue";
import Paging from "../../components/paging/paging.vue";

export default {
  data() {
    return {
      title: "对账单管理",
      SecTitle: "账单明细",
      //分页参数
      total: 1, //总共多少条，这个需要通过接口获取后赋值
      pagesize: 6,
      currentPage: 1,

      zxform: {
        billTime: "",
        orderNo: "",
        name: "",
        payType: "",
      },
      BillsData: [
        {
          id: 1,
          billTime: "2018-11-11 13:20:11",
          orderNo: "CJR2139987",
          serialNo: "2333655414112323",
          name: "张思",
          price: "+38.00",
          platformMoney: "80023231",
          tradeType: "退款",
          payType: "微信",
        },
      ],
    };
  },
  components: {
    Title,
    Paging,
  },
  methods: {
    //子组件传入pagesize
    getPagesize(val) {
      this.pagesize = val;
      this.myAxios();
    },
    //子组件传入CurrentPage
    getCurrentPage(val) {
      this.currentPage = val;
      this.myAxios();
    },
    myAxios() {
      this.axios({
        method: "POST",
        url: "/bill/list",
        data: {
          billTime: this.zxform.billTime,
          name: this.zxform.name,
          orderNo: this.zxform.orderNo,
          page: this.currentPage,
          pageSize: this.pagesize,
          payType: this.zxform.payType,
        },
      })
        .then((res) => {
          let myData = res.data.data;
          this.BillsData = [];
          this.total = res.data.count;
          myData.forEach((obj) => {
            obj.billTime = this.tsToTime(obj.billTime);
            this.BillsData.push(obj);
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //将时间格式转化为时间戳
    onFilter() {
      if (
        this.zxform.billTime ||
        this.zxform.orderNo ||
        this.zxform.name ||
        this.zxform.payType
      ) {
        this.currentPage = 1;
        this.myAxios();
      } else {
        this.$notify({
          title: "提示",
          message: "请输入要筛选的信息",
          type: "warning",
        });
      }
      //
    },
    //将时间戳转化为时间格式
    tsToTime(timestamp) {
      var date = new Date(timestamp);
      var Y = date.getFullYear() + "-";
      var M = date.getMonth() + 1 + "-";
      var D = date.getDate() + " ";
      var h = date.getHours() + ":";
      var m = date.getMinutes() + ":";
      var s = date.getSeconds();
      return Y + M + D + h + m + s;
    },
    changeColor(row) {
      if (row.row.price > 0 && row.column.label == "金额") {
        row.row.price = row.row.price;
        return "color:rgb(5, 172, 5);fontWeight:bold";
      } else if (row.row.price < 0) {
        row.row.price = row.row.price;
        return "color:red";
      }
    },
  },
  created() {
    this.myAxios();
  },
  computed: {},
};
</script>

<style scoped></style>
